@charset "utf-8";

$font-size:20px;

$color:#ff9344;

@function r($px){
    @return $px/$font-size*1rem;
}

.web{
    width: 100%;
    height: 100%;
    position: relative;
    header{
        width: 100%;
        padding-top: r(17px);
        padding-bottom: r(9px);
        position: absolute;
        top: 0;
        left: 0;
        .header_logo{     
            height: r(123px);
            width: r(123px);
            margin-left: r(23px);
            overflow: hidden;
            a{
                display: inline-block;
                img{
                    width: 100%;
                }
            }
        }
        .icon_right{    
            position: relative;       
            margin-right: r(21px);
            margin-top: r(30px);
            color: $color;
            .iconfont{
                font-size: r(50px);
            }
            .icon-mail{
                font-size: r(72px);
            }
            .news{
                position: absolute;
                top: 0;
                right: 0;
                width: r(27px);
                height: r(27px);
                text-align: center;
                line-height: r(27px);
                background: #fa5050;
                border-radius:50%;
                color: #fff;
                font-size: r(20px);
            }
        }
        .city{
            width: r(163px);
            height: r(60px);
            box-sizing: border-box;
            color: #000;
            border: 1px solid $color;
            font-size: r(26px);
            margin-right: r(21px);
            margin-top: r(30px);
            position: relative;
            select{
                
                width: 100%;
                height: 100%;
                line-height: r(60px);
                border: none;
                padding-left: r(14px);
                -webkit-appearance: none;/*去除默认样式*/
            }
            &::after{
                content: "";
                border-top: r(16px) solid $color;
                border-left: r(15px) solid transparent;
                border-right: r(15px) solid transparent;
                position: absolute;
                right: r(11px);
                top: 50%;
                transform: translateY(-50%);
                
            }
            
        }
        .search{
            width:r(269px);
            height: r(55px);
            border-radius: r(55px);
            margin:0 auto;
            border: r(3px) solid $color;
            box-sizing: border-box;
            margin-top: r(34px);
            padding-left: r(20px);
            padding-right: r(15px);
            position: relative;
            input[type='text']{
                height: 100%;
                border: none;
                width: r(191px);
                color: #777777;
                font-size: r(24px);
            }
                .iconfont{
                    position: absolute;
                    font-size: r(34px);
                    right: r(12px);
                    color: $color;
                    top: r(8px);
                }           
        }
    }
    main{
        position: absolute;
        top: r(150px);
        left: 0;
    }
    footer{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        ul{
            width: 100%;
            
            li{
                font-size: r(26px);
                text-align: center;
                float: left;
                list-style: none;
                width:25%;
                padding-bottom: r(15px);
                padding-bottom: r(15px);
                .iconfont{
                    font-size: r(50px);
                    color: $color;
                }
                .pitch_on{
                    color: #ccc;

                }
                a{
                    color: #000;
                }
            }
        }
    }
}
